<template>
  <div class="tab-bar">
    <template v-for="(item, index) in tabbarData" :key="index"
      ><div
        class="tab-bar-item"
        @click="itemClick(item.path, index)"
        :class="{
          active: index === currentIndex
        }"
      >
        <img
          :src="getAssetUrl(item.image)"
          alt=""
          v-if="currentIndex !== index"
        />
        <img :src="getAssetUrl(item.activeImage)" alt="" v-else />
        <span class="text">{{ item.text }}</span>
      </div></template
    >
  </div>
</template>
<script setup>
import { ref } from 'vue'
import tabbarData from '@/assets/data/tabbar.js'
import { useRouter } from 'vue-router'
import { getAssetUrl } from '@/utils/get_assets_img.js'
const currentIndex = ref(0)
const router = useRouter()
const itemClick = (path, index) => {
  currentIndex.value = index  
  router.push(path)
}
</script>
<style lang="less" scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  border-top: 1px solid #f3f3f3;
  & .active {
    color: var(--primary-color);
  }
  .tab-bar-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .text {
      font-size: 12px;
    }
    img {
      width: 28px;
      margin-bottom: 2px;
    }
  }
}
</style>
